<template>
  <transition name="fade">
    <div :class="loadClass" :style="loadStyle">
      <div :class="containerClass">
        <div :class="groupClass">
          <div :class="dotClass" :style="dotStyle" v-if="!isShowIcon"></div>
          <div :class="iconClass" v-else>
            <slot name="icon">
              <i :class="defaultIconClass" :style="iconStyle"></i>
            </slot>
          </div>
        </div>
        <div :class="conClass" :style="conStyle">
          <slot name="text">{{text}}</slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { oneOf } from "utils/index.js";
const prefixCls = "vbestui-loading";
export default {
  name: "BLoading",
  props: {
    size: {
      validator(value) {
        return oneOf(value, ["small", "default", "large"]);
      },
      default: "default",
    },
    text: {
      type: String,
      default: "loading……",
    },
    icon: {
      type: String,
      default: "",
    },
    iconSize: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
    fontSize: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
    backgroundColor: {
      type: String,
      default: "",
    },
    fix: {
      type: Boolean,
      default: false,
    },
    zIndex: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      prefixCls: prefixCls,
    };
  },
  computed: {
    loadClass() {
      return [this.fix ? `${this.prefixCls + "-fix"}` : this.prefixCls];
    },
    loadStyle() {
      return {
        backgroundColor: this.backgroundColor,
        zIndex: this.zIndex,
      };
    },
    containerClass() {
      return [`${this.prefixCls + "-container"}`];
    },
    groupClass() {
      return [`${this.prefixCls + "-group"}`];
    },
    dotClass() {
      return [
        `${this.prefixCls + "-dot"}`,
        `${this.prefixCls + "-dot-" + this.size}`,
      ];
    },
    dotStyle() {
      return {
        borderColor: this.color,
        width: this.width,
        height: this.height,
      };
    },
    iconClass() {
      return [`${this.prefixCls + "-icon"}`];
    },
    defaultIconClass() {
      return [`${this.icon}`,`${this.prefixCls+'-icon-'+this.size}`];
    },
    iconStyle() {
      return {
        fontSize: this.iconSize,
        color: this.color || "var(--primary)",
      };
    },
    conClass() {
      return [`${this.prefixCls + "-content"}`];
    },
    conStyle() {
      return {
        color: this.color,
        fontSize: this.fontSize,
      };
    },
    /**显示icon */
    isShowIcon() {
      return this.icon != "" || this.$slots.icon;
    },
  },
};
</script>